<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/angular.js/1.6.4/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <div class="container"  ng-controller="myCtr">
        <div class="page-header">
            <h1>User</h1>
        </div>

        <table class="table table-default">
            <thead>
                <th>编辑</th>
                <th>姓</th>
                <th>名</th>
            </thead>
            <tbody>
                <tr ng-repeat="item in model">
                    <td>
                        <button class="btn btn-danger" ng-click="edit($index)">
                            <span class="glyphicon glyphicon-pencil"></span>
                            编辑
                        </button>
                    </td>
                    <td>{{item.fname}}</td>
                    <td>{{item.lname}}</td>
                </tr>
            </tbody>
        </table>
        <hr>

        <button class="btn btn-success" ng-click="create()">
            <span class="glyphicon glyphicon-user">+</span>
            创建新用户
        </button>
        <hr>

        <h2 ng-show="isHidden">创建用户</h2>

        <h2 ng-hide="isHidden">编辑用户</h2>

        <form action="" class="form-horizontal">
            <div class="form-group">
                <label for="" class="control-label col-md-1">姓:</label>
                <div class="col-md-11">
                    <input type="text" class="form-control" ng-model="firstName">
                </div>
            </div>
            <div class="form-group">
                <label for="" class="control-label col-md-1">名:</label>
                <div class="col-md-11">
                    <input type="text" class="form-control" ng-model="lastName">
                </div>
            </div>
            <div class="form-group" ng-show="isHidden">
                <label for="" class="control-label col-md-1">密码:</label>
                <div class="col-md-11">
                    <input type="text" class="form-control" ng-model="password">
                </div>
            </div>
            <div class="form-group" ng-show="isHidden">
                <label for="" class="control-label col-md-1">确认密码:</label>
                <div class="col-md-11">
                    <input type="text" class="form-control" ng-model="repass">
                </div>
            </div>
        </form>
        <hr>

        <button class="btn btn-success" ng-click="save()" ng-disabled="isClick()">
            <span class="glyphicon glyphicon-floppy-disk"></span>
            保存
        </button>
    </div>
</body>
<script>
//    var model = [{fname:"董",lname:"帅哥"},{fname:"孟",lname:"烦气"},{fname:"封",lname:"建英"}]
    var types = 1;
    var app = angular.module("myApp",[]);
    app.controller("myCtr",function($scope,$http){
        $scope.isHidden = true;
        var _index = -1;
        //Ajax请求
        $http({
            method:'get',
            url:'/angularpath',
            params:{
                type:types,

            }
        }).then(function(res){
            console.log(res.data);
            $scope.model = res.data;
        },function(err){
            console.log(err);
        })

        //编辑按钮
        $scope.edit = function(index){
            _index = index;
            $scope.isHidden = false;
            $scope.firstName = $scope.model[index].fname;
            $scope.lastName = $scope.model[index].lname;
        }

        //创建按钮
        $scope.create = function(){
            $scope.isHidden = true;
            clearFun();
        }
        function clearFun(){
            $scope.firstName="";
            $scope.lastName="";
            $scope.password="";
            $scope.repass="";
        }

        //保存按钮:将input值确定然后上传;
        $scope.save = function(){
            if($scope.isHidden){
                //创建新用户
                var insert = {
                    fname:$scope.firstName,
                    lname:$scope.lastName,
                }
                if($scope.password==$scope.repass){
                    $scope.model.push(insert)
                    $http({
                        method:'get',
                        url:'/angularpath',
                        params:{
                            type:2,
                            fname:$scope.firstName,
                            lname:$scope.lastName
                        }
                    }).then(function(res){
                        alert(res.data)
                    },function(err){
                        console.log(err);
                    })
                }else{
                    alert("请注意你的用词,不然我报警了!~")
                }
            }else{
                //编辑用户
                $http({
                    method:'get',
                    url:'/angularpath',
                    params:{
                        type:3,
                        yfname:$scope.model[_index].fname,
                        ylname:$scope.model[_index].lname,
                        fname:$scope.firstName,
                        lname:$scope.lastName
                    }
                }).then(function(res){
                    alert(res.data);
                },function(err){
                    console.log(err);
                })
                $scope.model[_index].fname = $scope.firstName;
                $scope.model[_index].lname = $scope.lastName;
            }
            clearFun();
        }

        $scope.isClick = function(){
            if($scope.isHidden){
                //创建新用户
                types=2;
                return !($scope.firstName && $scope.lastName && $scope.password && $scope.repass && $scope.password == $scope.repass)
            }else{
                //编辑用户
                types=3;
                if(($scope.firstName != $scope.model[_index].fname || $scope.lastName != $scope.model[_index].lname ) && $scope.firstName != "" && $scope.lastName != "")
                    return false;
                else{
                    return true;
                }
            }
        }
    })
</script>
</html>